<template>
  <div class="">
    <el-card class="gray-card no-border no-margin-top" shadow="never">
      <el-form ref="form" :model="form" class="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人:" label-width="20%"
              >系统管理员</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间:" label-width="20%">{{
              getCurrentTime()
            }}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="耗材编码:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.materialId"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="耗材名称:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.materialName"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="耗材类型:" label-width="20%">
              <el-select
                v-model="form.type"
                placeholder="选择耗材类型"
                style="width: 60%"
                show-word-limit
              >
                <el-option
                  v-for="item in meterialTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="适用样本:" label-width="20%">
              <el-select
                v-model="form.model"
                placeholder="请选择"
                show-word-limit
              >
                <el-option
                  v-for="item in type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可检项目:" label-width="20%">
              <el-select v-model="form.projectId" placeholder="请选择">
                <el-option
                  v-for="item in projectOptions"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="包装规格:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.packAge"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试剂单位:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.unit"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="存储温度:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.temperature"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂商:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.manufacturer"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="配套仪器:" label-width="20%">
              <el-select
                v-model="form.instrumentId"
                placeholder="请选择"
                show-word-limit
              >
                <el-option
                  v-for="item in instrumentOptions"
                  :key="item.id"
                  :label="item.instrumentName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" label-width="20%">
              <el-select v-model="form.status">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="库存预警值:" label-width="20%">
              <el-input
                style="width: 60%"
                v-model="form.inventory"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                style="width: 60%"
                type="textarea"
                v-model="form.remark"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div class="fr">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="toBack()">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  addMaterialInfo,
  updateMaterialInfo
} from "../../../../api/business/material";
import { selectList } from "../../../../api/business/project";
import { listInstrument } from "../../../../api/business/instrument";

export default {
  name: "addEdit",
  components: { Treeselect },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    editId: {
      type: String,
      default: ""
    },
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      title: "新增",
      deptOptions: undefined,
      projectOptions: [],
      instrumentOptions: undefined,
      meterialTypeOptions: [
        {
          value: null,
          label: "选择耗材类型"
        },
        {
          value: 1,
          label: "试剂"
        },
        {
          value: 2,
          label: "质控品"
        }
      ],
      type: [
        {
          value: "",
          label: "请选择适用样本"
        },
        {
          value: "0",
          label: "血清"
        },
        {
          value: "1",
          label: "肝素全血"
        },
        {
          value: "2",
          label: "肝素血浆"
        },
        {
          value: "3",
          label: "EDTA全血"
        },
        {
          value: "4",
          label: "EDTA血浆"
        },
        {
          value: "5",
          label: "枸橼酸全血"
        },
        {
          value: "6",
          label: "枸橼酸血浆"
        },
        {
          value: "7",
          label: "末梢血"
        },
        {
          value: "8",
          label: "质控液"
        },
        {
          value: "9",
          label: "粪便"
        }
      ],
      status: [
        {
          value: 0,
          label: "禁用"
        },
        {
          value: 1,
          label: "启用"
        }
      ],
      form: {
        // id:null,
        materialNo: "",
        materialName: "",
        deptId: null,
        model: "",
        type: "",
        temperature: "",
        unit: "",
        status: "",
        manufacturer: "",
        manufacturingDate: null,
        shelflife: "",
        remark: "",
        packAge: "",
        inventory: "",
        projectId: "",
        instrumentId: ""
      }
    };
  },
  created() {
    this.form = this.formData;
    this.getTreeSelect();
    this.getProjectOptions();
    this.getInstrumentOptions();
  },
  methods: {
    handleData(row) {
      if (row) {
        this.form = row;
      }
    },
    // 表单重置
    reset() {
      this.form = {
        materialNo: "",
        materialName: "",
        deptId: null,
        model: "",
        type: "",
        temperature: "",
        unit: "",
        status: "",
        manufacturer: "",
        manufacturingDate: "",
        shelflife: "",
        remark: "",
        packAge: "",
        inventory: "",
        projectId: "",
        instrumentId: ""
      };
      this.resetForm("form");
    },
    toBack() {
      this.$emit("func", false);
      this.reset();
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();

      _this.gettime = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf;
      return _this.gettime;
    },
    getTreeSelect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    getProjectOptions() {
      selectList().then(response => {
        this.projectOptions = response;
      });
    },
    getInstrumentOptions() {
      listInstrument().then(response => {
        this.instrumentOptions = response.rows;
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     this.buttonLoading = true;
      //     if (this.form.id != null) {
      updateMaterialInfo(this.form).then(response => {
        this.msgSuccess("修改成功");
        this.reset();
        this.$emit("func", false);
      });
      //         } else {
      //     addMaterialInfo(this.form).then(response => {
      //       this.msgSuccess("新增成功");
      //       this.reset();
      //       this.$emit("func", false);
      //     });
      //   }
      // }
      //     });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
